/*
 * @Author: szx
 * @Date: 2022-07-04 17:45:06
 * @LastEditTime: 2022-07-05 17:07:19
 * @Description:
 * @FilePath: \link_jump\src\components\Footer.tsx
 */
import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, Alert } from 'react-native';

import BouncyCheckbox from 'react-native-bouncy-checkbox';
import trashIcon from '../assets/icons/trash/trash.png';
import expoIcon from '../assets/icons/export.png';
import { Task } from './TasksList';
interface FooterProps {
  tasks: Array<Task>;
  handleAllCheckBox: (state: boolean) => void;
  removeTask: () => void;
  exportLink: () => void;
}
export function Footer({ tasks, handleAllCheckBox, removeTask, exportLink }: FooterProps) {
  const [checkboxState, setCheckboxState] = useState(false);
  const [count, setCount] = useState(0);

  useEffect(() => {
    const total = tasks.length;
    const chooseCount = tasks.reduce((pre: number, cur: Task) => pre + (cur.checked ? 1 : 0), 0);
    setCount(chooseCount);
    setCheckboxState(total !== 0 && total === chooseCount);
  }, [tasks]);

  const handleRemoveTask = () => {
    Alert.alert('删除链接', '确定要删除此链接吗？', [
      { text: '取消' },
      {
        text: '确定',
        onPress: () => removeTask()
      }
    ]);
  };

  const handleCheckBox = () => {
    const state = !checkboxState;
    setCheckboxState(state);
    handleAllCheckBox(state);
  };
  const handleExportLink = () => {
    exportLink();
  };

  return (
    <View style={styles.container}>
      <BouncyCheckbox
        size={22}
        style={styles.checkbox}
        textStyle={{
          textDecorationLine: 'none',
          fontSize: 14
        }}
        text="全选"
        isChecked={checkboxState}
        disableBuiltInState
        onPress={handleCheckBox}
      />
      <Text style={styles.tasksCounter}>选中 {count} 条链接</Text>
      <View style={styles.iconsContainer}>
        <TouchableOpacity
          style={{
            paddingLeft: 12
          }}
          onPress={() => handleExportLink()}
        >
          <Image source={expoIcon} />
        </TouchableOpacity>
        <TouchableOpacity
          style={{
            paddingLeft: 6
          }}
          onPress={() => handleRemoveTask()}
        >
          <Image source={trashIcon} />
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 45,
    paddingHorizontal: 15,
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    borderTopWidth: 1,
    borderTopColor: '#dddddd'
  },
  checkbox: {
    paddingLeft: 10
  },

  tasksCounter: {
    fontSize: 14.5,
    color: '#888888'
  },
  iconsContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  }
});
